import React ,{PureComponent} from "react";
import {connect} from 'react-redux';
import {actionCreators} from './store';
import List from "./components/List";
import Recommend from "./components/Recommend";
import Writter from "./components/Writter";
import {
    HomeWrapper,
    HomeLeft,
    HomeRight,
    BackTop
} from './style'

class Home extends PureComponent{
    render(){
        const {showScroll} = this.props;
        return (
            <HomeWrapper>
                <HomeLeft>
                    <List></List>
                </HomeLeft>
                <HomeRight>
                    <Recommend></Recommend>
                    <Writter></Writter>
                </HomeRight>
                {showScroll? <BackTop onClick={this.handleScrollTop}>顶部</BackTop>:null}
               
            </HomeWrapper>
        )
    }

    componentDidMount(){
        this.props.changeHomeData();
        this.bindEvents()
    }
    handleScrollTop(){
        window.scrollTo(0,0)
    }
    bindEvents(){
        window.addEventListener('scroll',this.props.changeScrollShow)
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.props.changeScrollShow)
    }
}

const mapStateToProps = (state)=>({
    showScroll:state.getIn(['home','showScroll'])
})

const mapDispatchToProps = (dispatch)=>({
    changeHomeData(){
        const action = actionCreators.getHomeInfo();
        dispatch(action)
    },
    changeScrollShow(){
        if(document.documentElement.scrollTop>100){
            dispatch(actionCreators.toggleTopShow(true))
        }else{
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})

export default connect(mapStateToProps,mapDispatchToProps)(Home);